---
import type {
  InferGetStaticParamsType,
  InferGetStaticPropsType,
} from "astro";
import Base from "@layouts/Base.astro";
import DateSelector from "@components/DateSelector.astro";
import SimplePostList from "@components/templates/SimplePostList.astro";
import { datePaths, sortLastCreated } from "@lib/collection/helpers";

export const getStaticPaths = datePaths;

export type Params = InferGetStaticParamsType<typeof getStaticPaths>;
export type Props = InferGetStaticPropsType<typeof getStaticPaths>;

let { posts, previous, next, years, months, days } = Astro.props;
posts = posts.sort(sortLastCreated);

const dateParts = Astro.params.date?.split("/").map(Number);
const y = dateParts?.[0];
const m = dateParts?.[1] ?? 1;
const d = dateParts?.[2] ?? 3;
const date = (y !== undefined) ? new Date(Date.UTC(y, m - 1, d)) : undefined;

const format = date === undefined
  ? undefined
  : new Intl.DateTimeFormat("pt-PT", {
    year: y === undefined ? undefined : "numeric",
    month: dateParts?.[1] === undefined ? undefined : "long",
    day: dateParts?.[2] === undefined ? undefined : "numeric",
  }).format(date);
const title = "Publicações" + (format !== undefined ? ` -- ${format}` : "");
const description = "Ultímas publicações" +
  (format !== undefined ? ` do dia ${format}` : "") + ".";
---

<Base {title} {description}>
  <main
    itemprop="mainContentOfPage"
    itemscope
    itemtype="https://schema.org/WebPageElement"
  >
    <section
      id="posts"
      itemprop="citation"
      itemscope
      itemtype="http://schema.org/Blog"
    >
      <h2 itemprop="name description">{title}</h2>
      <DateSelector {date} {years} {months} {days} />
      {
        (next || previous) && (
          <nav>
            {
              previous && (
                <p>
                  &lt; <a href={`/blog/${Astro.props.previous}`}>Anterior</a>
                </p>
              )
            }
            <span class="small">{format}</span>
            {
              next && (
                <p><a href={`/blog/${Astro.props.next}`}>Próximo</a> &gt;</p>
              )
            }
          </nav>
        )
      }
      <SimplePostList
        {posts}
        dateOptions={{
          weekday: "long",
          year: "numeric",
          month: "long",
          day: "numeric",
          hour: "2-digit",
          minute: "2-digit",
          timeZoneName: "long",
        }}
      />
      {
        (next || previous) && (
          <nav>
            {
              previous && (
                <p>
                  &lt; <a href={`/blog/${Astro.props.previous}`}>Anterior</a>
                </p>
              )
            }
            <span class="small">{format}</span>
            {
              next && (
                <p><a href={`/blog/${Astro.props.next}`}>Próximo</a> &gt;</p>
              )
            }
          </nav>
        )
      }
      <DateSelector {date} {years} {months} {days} />
    </section>
  </main>
</Base>

<style>
  nav {
    display: flex;
    align-items: center;
    padding-block: calc(var(--size-2) * 1em);
    gap: calc(var(--size-2) * 1em);
    justify-content: center;
    & > p {
      border-radius: calc(var(--size-0) * 1em);
      border-width: 1px;
      box-shadow: 0 1px 2px var(--color-light);
      font-size: calc(var(--size-3) * 1rem);
      font-weight: 500;
      padding-inline: calc(var(--size-3) * 1em);
      padding-block: calc(var(--size-2) * 1em);
      display: inline-flex;
      gap: calc(var(--size-2) * 1em);
      align-items: center;
      justify-content: center;
      height: 2ch;
    }
  }
</style>